<template>
	<view class="container">
		<view class="index-top">
			<view class="avatar" @click="handleUserInfo">
				<img class="img" :src="userInfo.avatar || '../../static/avatar.jpg'" />
			</view>
			<view class="info">
				<text style="font-size: 50rpx;font-weight: bold;">{{userInfo.nickname}} /{{userInfo.gender}} </text>
				<text style="font-weight: bold;">{{userInfo.username}}</text>
			</view>
			<view style="align-self: baseline; font-size: 36rpx;" size="mini" @click="outLogin" type="warn">退出登陆</view>
		</view>
		<view class="subject">
			<view class="list-box">
				<view class="list" v-for="(items, index) in workList">
					<view class="list-parent" @click="listParent(items,index)">
						<image class="list-bg" :src="items.opcimg" alt="" ></image>
						<view class="list-parent-txt">
							<view>
								<text class="list-parent-title">{{items.opcName}}{{items.repart == 0 ?'初训':'复训'}}</text>
								<text class="list-parent-des">共有3套试卷，每套时间约2小时</text>
							</view>
							<view :class="activeIndex===index ? 'iconfont icon-ai-arrow-down' : 'iconfont icon-ai-arrow-right'">
							</view>
						</view>
					</view>
					<view :class="activeIndex===index ? 'list-sub' : 'sub-hover'">
						<view class="list-sub-box" v-for="(item, index) in items.list">
							<image class="list-bg" :src="items.opcimg" alt="" ></image>
							<view class="list-card">
								<view class="list-card-txt">
									<!-- <text class="title-sub">理论科目练习 {{item.paperIndex}}卷 -->
									<!-- {{item.paper == 1? '初': '补'}} out:{{item.out}}</text> -->
									<text class="title-sub">理论科目练习 {{item.paperIndex}}卷</text>
								</view>
								<!-- <text>{{formatDate(item.examDate)}}</text> -->
								<view class="list-card-button" v-if="item.out == 4  || item.out == 2">
									<view class="button-l" @click="examBtn(item, 1, item.paperIndex)">试题练习</view>
									<view class="button-r" @click="examBtn(item, 3, item.paperIndex)">模拟考试
									</view>
								</view>
								<view class="list-card-button" v-else>
									<view class="button-l" @click="examBtn(item, 4, item.paperIndex)">试题练习</view>
									<view class="button-r" @click="examBtn(item, 3, item.paperIndex)">模拟考试
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
		<view>
			<uni-popup :safe-area="false" ref="userPopup">
				<img :src="userInfo.avatar" alt="">
				<view>
					<view>
						<text>身份证号码：</text>
						<text>{{userInfo.username}}</text>
					</view>
					<view>
						<text>姓名：</text>
						<text>{{userInfo.nickname}}</text>
					</view>
					<view>
						<text>性别：</text>
						<text>{{userInfo.gender}}</text>
					</view>
					<view>报考工种：
						<view v-for="(item,index) in workList">
							<view class="">
								<text>作业类别{{item.oppName}}</text>
								<text>操作项目{{item.opcName}}</text>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 普通弹窗 -->
			<uni-popup style="overflow-y: scroll;" :safe-area="false" ref="popup" :mask-click="false"
				@change="popChange">
				<view style="overflow-y: scroll; max-height: 900rpx;" class="notice-box" type="center">
					<view @click="closeNotice" class="iconfont icon-cuowu"></view>
					<view class="notice-box-top">
						<text class="notice-box-title">考试须知:</text>
						<view class="notice-box-title-text">
							1、不会鼠标，不熟悉电脑的,进入考场之前找老师培训熟悉后才能进入考试<br />
							2、需要认真答完100题，检查无误后才能交卷。<br />
							3、不得以任何方式作弊，违者取消1年内的考试资格。<br />
							4、考试过程，不能东张西望，不能喧哗。<br />
							5、不得点击 <text style="color: #f00;">[个人信息有误]</text>，有错误请举手。
						</view>
					</view>
					<view class="read-notice">
						<checkbox-group @change="readNoticeChange">
							<label for="">
								<checkbox checked value="1" color="#329cfe" style="transform:scale(0.7)" /><text
									style="font-size: 32rpx;">我已阅读考试须知</text>
							</label>
						</checkbox-group>
					</view>
					<view class="userinfo">
						<text class="notice-box-title">个人信息:</text>
						<view class="userinfo-txt">
							<table style="width: 100%; text-align: left;">
								<tr>
									<td class="bg1">姓名：</td>
									<td styc="">{{userInfo.nickname}}</td>
									<td rowspan="2" style="max-width: 120px; text-align: center;">本人照片</td>
								</tr>
								<tr>
									<td class="bg1">身份证</td>
									<td>{{userInfo.username}}</td>
								</tr>
							</table>
						</view>
						<uni-data-checkbox class="checkbox-ss" :groupstyles="{justifyContent:'space-evenly'}"
							v-model="infoValue" :localdata="range" @change="infoChange"></uni-data-checkbox>
					</view>
					<view style="color: #f00;font-size: 24rpx; margin: 10rpx 0;">(请仔细核对人员信息，开考后，将不能修改人员信息！)</view>
					<button class="begin-btn" @click="beginExam" :loading="loading" type="primary">开始考试<text
							v-if="but_disabled">({{seconds}}s)</text></button>
				</view>
			</uni-popup>
		</view>
		<m-tabbar v-if="!tabbar_show" name="tabbar" fixed fill ref="tabbar" native :safeBottom="false"
			current="0"></m-tabbar>
		<m-tabbar v-else name="tabbar" fixed fill ref="tabbar" :tabbar="tabbar" :safeBottom="false"
			current="0"></m-tabbar>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/index.js'
	import {
		getUserExam,
		getUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				formatDate,
				but_disabled: true,
				seconds: 5,
				timer: null,
				userInfoConfirm: 0, //个人信息  0无误  1有误
				infoValue: 0, //个人信息  0无误  1有误
				loading: false,
				readNotice: 1, //考试须知   undefined 未勾选  '1' 已勾选
				range: [{
						'value': 0,
						'text': '个人信息无误'
					},
					{
						'value': 1,
						'text': '个人信息有误'
					}
				],
				userInfo: {},
				planId: '', //计划ID
				planName: '', // 工种名称
				workList: [],
				otype: '',
				model: '',
				user_exam: {},
				type: '',
				img_list_bg: '',
				tabbar: {},
				tabbar_show: false,
				paperIndex: [],
				activeIndex:0,
				paper: 0, //0 A卷 1 B卷
			}
		},
		onShow() {
			this.loadData().then(res => {
				this.tabbar_show = uni.getStorageSync('tabbar_show')
				this.tabbar = uni.getStorageSync('tabbar')
			})
		},
		onLoad(val) {
			if(val.source != undefined){
				uni.setStorageSync('source',val.source)
			}
			this.$nextTick(() => {
				this.tabbar_show = uni.getStorageSync('tabbar_show')
				this.tabbar = uni.getStorageSync('tabbar')
			})
			this.workList = []
			if (JSON.stringify(this.$refs) != "{}") {
				this.$refs.popup.close()
				this.readNotice = undefined
				this.userInfoConfirm = 0
				this.infoValue = 0
			}
		},
		methods: {
			handleUserInfo() {
				// this.$refs.userPopup.open()
			},
			outLogin() {
				uni.clearStorage()
				uni.showToast({
					title: '退出登陆',
					success: () => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				})
			},
			loadData() {
				return new Promise((resolve, reject) => {
					getUserInfo().then(res => {
						this.userInfo = res.data;
						this.userInfo.gender = res.data.gender == '0' ? '女' :'男';
						uni.setStorageSync('tabbar_show', this.userInfo.userPlans.some(obj => obj['userSub'] == 1));
						uni.setStorageSync('userinfo', this.userInfo);
						this.workList = this.transformData(this.userInfo.userPlans)
						resolve();

						// 如果不需要在 Promise 完成时执行额外的操作，或者操作已完成，  
						// 则可以直接注释掉下面的 // this.$refs.userPopup.open();  
						// 如果需要在 Promise 完成时打开某个弹窗或其他UI元素，  
						// 可以在 resolve() 调用之前或之后执行相应的操作。  
						// 例如：  
						// this.$refs.userPopup.open();  
						// resolve();  

					}).catch(error => {
						// 处理错误情况  
						reject(error);
					});
				});
			},
			transformData(originalData) {
				const now = new Date().getTime(); // 获取当前时间  
				  
				return originalData.reduce((acc, item) => {  
				    // // 如果examDate是字符串格式，则将其转换为时间戳  
				    // const examDateTimestamp = Date.parse(item.examDate);  
				    // const examDate = examDateTimestamp ? new Date(examDateTimestamp) : item.examDate;  
					const examDate = item.examDate; // 将examDate字符串转换为Date对象  
				      
				    const arr = {  
				        ...item,
						"opcimg": this.opcimg(item.opc),
				        "list": []  
				    };  
				      
				    ['A', 'B', 'C'].forEach(paperIndex => {  
				        const newDataItem = {  
				             ...item,
				             "paperIndex": paperIndex, 
				        };  
				          
				        // 设置out和paper的默认值  
				        let out = 2;  
				        let paper = 1;  
				          
				        if (item.opcClassId !== 0) {  
				            if (paperIndex === 'A') {  
				                if (examDate > now) {  
				                    out = item.out;  
				                }  
				            } else if (paperIndex === 'B') {  
				                if (examDate < now) {  
				                    paper = 2;  
				                    out = item.out;  
				                }  
				            }  
				        }  
				          
				        newDataItem.out = out;  
				        newDataItem.paper = paper;  
				          
				        // 将新的数据项添加到累加器中  
				        arr.list.push(newDataItem);  
				    });  
				      
				    acc.push(arr);  
				    return acc;  
				}, []);
			},
			opcimg(val) {
				if (val == '030302') {
					return '../../static/gcbj.png'
				}
				if (val == '030101') {
					return '../../static/gybg.png'
				}
				if (val == '030201') {
					return '../../static/hgbj.png'
				}
				if (val == '030102') {
					return '../../static/diyabg.png'
				}
			},
			formatStr(val, i) {
				if (val.includes('熔化焊接与热切割作业')) {
					return i
				}
				if (val.includes('高处安装、维护、拆除作业')) {
					return i
				}
				if (val.includes('低压电工作业')) {
					return i
				}
				if (val.includes('高压电工作业')) {
					return i
				}
			},
			listParent(item,index){
				this.activeIndex = this.activeIndex === index ? 0 : index;
			},
			// 开始考试
			examBtn(item, val, paper) {
				this.model = val
				this.user_exam = item
				this.type = 1
				this.paper = paper
				uni.setStorageSync('opc', item.opc)
				uni.setStorageSync('opp', item.opp)
				uni.setStorageSync('opcName', item.opcName)
				uni.setStorageSync('examDate', item.examDate)
				uni.setStorageSync('paper', item.paper)
				uni.setStorageSync('paperIndex', item.paperIndex)
				if (this.model === 3) {
					this.$refs.popup.open()
					this.timer = setInterval(() => {
						this.seconds--;
						if (this.seconds <= 0) {
							clearInterval(this.timer);
							this.but_disabled = false
						}
					}, 1000);
				} else {
					uni.navigateTo({
						url: `../examExercise/examExercise?model=${val}&opcClassId=${this.user_exam.opcClassId}&paper=${paper}`,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			infoChange(val) {
				this.userInfoConfirm = val.detail.value
			},
			closeNotice() {
				this.$refs.popup.close()

			},
			popChange() {
				clearInterval(this.timer);
				this.seconds = 5
				this.but_disabled = true
				this.readNotice = 1,
				this.userInfoConfirm = 0
				this.infoValue = 0
			},
			readNoticeChange(val) {
				// console.log(val.detail.value[0]);
				this.readNotice = val.detail.value[0]
			},
			
			beginExam() {
				// console.log(this.user_exam);
				// return
				if (this.readNotice == undefined) {
					return uni.showModal({
						title: '提示',
						content: '请勾选【我已阅读考试须知】',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
				}
				if (this.userInfoConfirm == 1) {
					return uni.showModal({
						title: '提示',
						showCancel: false,
						content: '当前为模拟正式考试前的提示界面，如果你点了【个人信息有误】，在正式考试当天你将不能参加考试了！而且需要再等一个月才能安排考试。',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
				}
				uni.navigateTo({
					url: `../mockExam/mockExam?modeType=0&model=${this.model}&paper=${this.paper}&type=${this.type}&opcClassId=${this.user_exam.opcClassId}`,
					success: res => {
						this.$refs.popup.close()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	// uni-page-head{
	// 	display:none !important
	// }
	page {
		box-shadow: 0px -10rpx 16rpx -6rpx #2069c7;
		z-index: 2;
		background: linear-gradient(180deg, #4d8dec, rgba(104, 157, 234, 0));
		// height: 100%;
	}

	.checklist-group {
		display: flex;
		justify-content: space-around !important;
	}

	.container {
		.index-top {
			display: flex;
			color: #fff;
			padding: 50rpx 20rpx 20rpx 20rpx;
			align-items: center;

			.avatar {
				width: 100rpx;
				height: 100rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				flex: 1;
				font-size: 34rpx;
				padding-left: 30rpx;
				justify-content: space-around;
			}
		}
	}

	.subject {
		margin: 0 20rpx 80rpx 20rpx;
		.list-box{
			padding-bottom: 120rpx;
		}
		.list {
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			.list-parent{
				padding: 20rpx 30rpx 10rpx 30rpx;
				position: relative;
				.list-parent-txt{
					z-index: 2;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.list-parent-title{
					font-weight: 600;
					font-size: 38rpx;
					color: #2386FF;
					display: block;
					margin-bottom: 10rpx;
				}
				.list-parent-des{
					font-weight: 400;
					font-size: 28rpx;
					color: #979999;
					display: block;
				}
				.iconfont{
					color: #484848;
					font-size: 42rpx;
				}
				.list-bg {
				opacity: .3;
					::before {
					    content: "";  
					    position: absolute;  
					    top: 0;  
					    left: 0;  
					    right: 0;  
					    bottom: 0;  
					    background-color: #ffffff61;  
					    // z-index: -1;  
					}  
				}
			}
			.list-sub{
				padding: 0 30rpx;
				overflow: hidden;
				transition: all .3s ease-in-out;
				height: auto;
			}
			.sub-hover{
				height: 0;
				display: none;
				transition: all .3s ease-in-out
			}
			.list-sub-box{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-bottom: 15rpx;
			}
			.list-icon {
				font-size: 68rpx;
			}

			.list-bg {
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			 
			}

			.list-card {
				flex: 1;
				z-index: 2;
				display: flex;
				flex-direction: column;
				.list-card-txt {
					font-size: 34rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx dashed #858687;
					font-weight: bold;
					padding-top: 30rpx;
					padding-left: 45rpx;

					.title-sub {
						display: block;
						// padding-top: 30rpx;
						font-size: 30rpx;
						color: #ff0e00;
					}
				}

				.list-card-button {
					margin-top: 20rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					border-radius: 10rpx;
					flex: 1;
					display: flex;
					justify-content: space-between;
					color: #fff;
					position: relative;
					overflow: hidden;

					view {
						// transform: skew(20deg);
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						position: relative;
					}

					.button-l {
						&:before {
							position: absolute;
							top: 0rpx;
							left: 0;
							z-index: -1;
							content: '';
							// border-radius: 10rpx 0 0 10rpx;
							border-bottom: 85rpx solid #2386FFFF;
							border-left: 0rpx solid transparent;
							border-right: 40rpx solid transparent;
							width: 100%;
						}
					}

					.button-r {
						&:after {
							position: absolute;
							left: 5%;
							// translate-x: (50%);
							// translate
							transform: skew(25deg);
							content: '';
							width: 4rpx;
							height: 85rpx;
							background: #fff;
						}

						&:before {
							position: absolute;
							top: 0rpx;
							left: 0;
							z-index: -1;
							content: '';
							border-top: 85rpx solid #F67914FF;
							border-left: 40rpx solid transparent;
							border-right: 40rpx solid transparent;
							width: 100%;
						}
					}
				}
			}
		}
	}

	.notice-box {
		width: 600rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 10rpx;

		.icon-cuowu {
			font-size: 36rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			background: #ff2e6c;
			border-radius: 0px 10rpx 0px 24rpx;
			color: #fff;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.notice-box-top {
			border: 2rpx solid #000;
		}

		.notice-box-title {
			display: block;
			background: #d0f0f9;
			padding: 10rpx;
			border-bottom: 1rpx solid #000;
			margin-bottom: 10rpx;
		}

		.notice-box-title-text {
			line-height: 40rpx;
			padding: 0 10rpx;
			display: block;
			font-size: 28rpx;
		}

		.read-notice {
			// display: flex;
			text-align: center;
			margin: 10rpx 0;
		}

		.userinfo {
			border: 2rpx solid #000;
			padding-bottom: 10rpx;
		}

		.userinfo-txt {
			font-size: 28rpx;
			margin-bottom: 20rpx;

			text {
				display: block;
				border-bottom: 1rpx solid #000;
			}

			.name {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}

			.sfzID {
				display: flex;
				flex-direction: column;
				flex: 1;
				border-left: 1rpx solid #000;
				border-right: 1rpx solid #000;

			}

			.userimg {
				display: flex;
				flex-direction: column;
				flex: 1;
				min-width: 65px;
				align-items: center;
				justify-content: center;
				// border-left: 1rpx solid #000;
			}
		}

		table {
			border: 1px solid #c9d5d5;

			td {
				border: 1px solid #c9d5d5;
			}
		}

		.bg1 {
			background-color: #fcfeff;
			max-width: 90px;
		}

		td {
			padding: 5rpx;
		}
	}
	
	.checkbox-ss {}

	.uni-data-checklist .checklist-group .checklist-box {
		margin: 5rpx 0 !important;
	}

	.notice-box {
		position: relative;
		// padding-bottom: 80rpx;
	}

	.begin-btn {
		height: 75rpx;
		line-height: 75rpx;
		font-size: 30rpx;
		// position: absolute;
		// width: 90%;
	}
</style>